<template>
	<div class="contents-container">
		<div class="search-area">
			<span class="lable-span">关键字</span>
			<el-input v-model="listQuery.strKey" style="width: 180px;" size="mini" placeholder="请输入关键字" />
			<span class="lable-span">设计师</span>
			<el-input v-model="listQuery.architectName" style="width: 180px;" size="mini" placeholder="请输入设计师名称" />
			<span class="lable-span">标签</span>
			<el-input v-model="listQuery.tags" style="width: 180px;" size="mini" placeholder="请输入标签" />
			<el-button size="mini" class="ml-15" type="primary" @click="getListData(1)">查询</el-button>
			<el-button size="mini" class="ml-15" @click="research">重置</el-button>
			<el-button size="mini" class="ml-15" type="success" @click="addData">新增</el-button>
		</div>
		<!-- 列表 -->
		<el-table :data="listData" border fit highlight-current-row style="width: 100%;">
			<el-table-column label="案例标题" align="center" width="300">
				<template slot-scope="scope">
					<span>{{ scope.row.title }}</span>
				</template>
			</el-table-column>
			<el-table-column label="设计师" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.architectName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="标签" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.tagName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="案例首图" align="center" width="150" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-image v-if="scope.row.imgUrl" contain :src="$urlHost + scope.row.imgUrl" :preview-src-list="srcList" alt=""
						@click="gteImgList($urlHost + scope.row.imgUrl)" />
				</template>
			</el-table-column>
			<el-table-column label="关联文章" align="center" width="300">
				<template slot-scope="scope">
					<span>{{ scope.row.articleName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="案例描述">
				<template slot-scope="scope">
					<span>{{ scope.row.caseDesc }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="240" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click="handleGetDetail(scope.row.id)">修改</el-button>
					<el-button size="mini" type="danger" @click="handleDeleted(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page-index.sync="listQuery.page" :page-size.sync="listQuery.limit"
			@pagination="getListData(listQuery.page)" />
		<!-- 新增/修改 -->
		<PopWindow v-show="showForm" :title="title" :mode="modeValue" @close="closeForm" @addHandle="addHandle"
			@updateHandle="updateHandle">
			<el-form ref="formData" :model="formData" label-width="100px" size="small" :rules="formDataRules">
				<el-form-item label="案例标题" prop="title">
					<el-input v-model="formData.title" class="my-input" />
				</el-form-item>
				<el-form-item label="设计师" prop="architectName">
					<el-select v-model="formData.userId" placeholder="请选择设计师" style="width: 100%;">
						<el-option v-for="item in userlist" :key="item.userId" :label="item.perName" :value="item.userId" />
					</el-select>
				</el-form-item>
				<el-form-item label="标签" prop="tags">
					<el-select v-model="formData.tags" placeholder="请选择标签" style="width: 100%;">
						<el-option v-for="item in tagList" :key="item.tag" :label="item.tag" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="案例首图" prop="imgUrl">
					<el-upload class="avatar-uploader" :action="$uploadImg" :show-file-list="false" :with-credentials="true"
						name="files" accept="image/png, image/jpeg" :on-success="handleLisenceSuccess" :before-upload="beforeUpload">
						<img v-if="formData.imgUrl" :src="$urlHost + formData.imgUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon" style="border: 1px dashed #d9d9d9;" />
						<el-tooltip class="item" effect="dark" content="只能上传jpg/png文件，且不超过10MB" placement="top">
							<i class="el-icon-question" />
						</el-tooltip>
					</el-upload>
				</el-form-item>
				<el-form-item label="关联文章" prop="articleId">
					<el-select v-model="formData.articleId" placeholder="请选择关联案例" style="width:100%;">
						<el-option v-for="item in articleList" :key="item.articleId" :label="item.title" :value="item.articleId" />
					</el-select>
				</el-form-item>
				<el-form-item label="案例简述" prop="caseDesc">
					<el-input v-model="formData.caseDesc" type="textarea" resize="none" :rows="3" />
				</el-form-item>
			</el-form>

		</PopWindow>
	</div>
</template>

<script>
import Pagination from '@/components/Pagination'
import PopWindow from '@/components/PopWindow'
import {
	addCase,
	editCase,
	deleteCase,
	getCaseList,
	getCaseDetail
} from '@/api/case'
import {
	getUserList
} from '@/api/user'
import {
	getArticleList
} from '@/api/article'
export default {
	name: 'Carousel',
	components: {
		PopWindow,
		Pagination
	},
	data() {
		return {
			total: 0, // 总数
			listData: [],
			userlist: [],
			LicenseImg: '',
			typeList: [{
				SubName: '跳转案例',
				SubNum: 1
			},
			{
				SubName: '无动作',
				SubNum: 0
			}
			],
			articleList: [],
			showForm: false, // 新增修改弹窗显示否
			dialogStatus: '', // 弹窗状态
			title: '案例新增',
			modeValue: 'add',
			uploadImg: '',
			listQuery: {
				page: 1, // 当前页码
				limit: 5, // 每页数量
				strKey: '', // 关键字
				tags: '',
				architectName: ''
			},
			tagList: [
				{ tag: '别墅', value: '1' },
				{ tag: '大平层', value: '2' },
				{ tag: '刚需家装', value: '3' },
				{ tag: '工装', value: '4' }
			],
			formData: {
				id: '',
				title: '',
				imgUrl: '',
				caseDesc: '',
				articleId: '',
				userId: '',
				architectName: '',
				tags: ''
			},
			srcList: [],
			formData: {
				title: '', // 案例标题
				imgUrl: '', // 图片地址
				caseDesc: '', // 案例描述
				articleId: '' // 关联文章id
			},
			// 表单验证规则
			formDataRules: {
				title: [{
					required: true,
					message: '请输入案例标题',
					trigger: 'blur'
				},
				{
					max: 50,
					message: '案例标题50个字内',
					trigger: 'blur'
				}
				],
				caseDesc: [{
					required: true,
					message: '请输入案例简述',
					trigger: 'blur'
				},
				{
					max: 300,
					message: '案例简述300个字内',
					trigger: 'blur'
				}
				],
				imgUrl: [{
					required: true,
					message: '请上传案例首图',
					trigger: 'blur'
				}],
				articleId: {
					required: true,
					message: '请选择关联文章',
					trigger: 'change'
				},
				tags: {
					required: true,
					message: '请选择标签',
					trigger: 'change'
				}
			}
		}
	},
	mounted() {
		this.getListData()
		this.getArticleList()
		this.getSelectList()
	},
	methods: {
		getListData(page) {
			const that = this
			that.$loadings()
			that.listQuery.page = page || 1
			getCaseList(that.listQuery).then((res) => {
				that.$loadings().close()
				that.listData = res.data
				console.log(res.data);
				that.listData.map((item)=>{
					item.tagName = that.tagList.filter((i)=>{ return i.value == item.tags})[0].tag
				})

				that.total = res.count
			}).catch(() => {
				that.$loadings().close()
			})
		},
		getSelectList() {
			// 获取下拉数据
			getUserList({
				pageIndex: 1, // 当前页码
				pageSize: 999, // 每页数量
				perType: 4 // 用户角色
			}).then(res => {
				this.userlist = res.data
			})
		},
		getArticleList() {
			const that = this
			that.$loadings()
			getArticleList({
				page: 1, // 当前页码
				limit: 999 // 每页数量
			}).then((res) => {
				that.$loadings().close()
				that.articleList = res.data
			}).catch(() => {
				that.$loadings().close()
			})
		},
		research() {
			this.listQuery = {
				page: 1, // 当前页码
				limit: 5, // 每页数量
				strKey: '', // 关键字
				tags: '',
				architectName: ''
			}
			this.getListData()
		},
		resetTemp() {
			this.title = ''
			this.formData = {
				id: '',
				title: '',
				imgUrl: '',
				caseDesc: '',
				articleId: '',
				userId: '',
				architectName: '',
				tags: ''
			}
		},
		addData() {
			this.resetTemp()
			this.title = '案例新增'
			this.modeValue = 'add'
			this.$nextTick(() => {
				this.$refs['formData'].clearValidate()
				this.showForm = true
			})
		},
		addHandle() {
			var that = this
			that.$refs.formData.validate(valid => {
				if (valid) {
					that.$loadings()
					that.formData.architectName = that.formData.userId?(that.userlist.filter(item => item.userId === that.formData.userId)[0].perName):''
					addCase(that.formData).then(data => {
						that.$loadings().close()
						that.$message({
							type: 'success',
							message: '添加成功!'
						})
						that.getListData()
						that.closeForm() // 重置表单
					})
						.catch(() => {
							that.$loadings().close()
						})
				} else {
					return false
				}
			})
			this.showForm = false
		},
		closeForm() {
			if (this.$refs.formData) {
				this.$refs.formData.resetFields()
			}
			this.showForm = false
		},
		handleGetDetail(id) {
			const that = this
			that.$loadings()
			getCaseDetail(id).then((res) => {
				that.$loadings().close()
				that.formData = {
					id: res.data.id,
					title: res.data.title,
					imgUrl: res.data.imgUrl,
					caseDesc: res.data.caseDesc,
					articleId: res.data.articleId,
					userId: res.data.userId,
					architectName: res.data.architectName,
					tags: res.data.tags
				}
				this.title = '案例修改'
				this.modeValue = 'edit'
				this.showForm = true
			}).catch((err) => {
				that.$loadings().close()
				console.log(err)
			})
		},
		updateHandle() {
			var that = this
			that.$refs.formData.validate(valid => {
				if (valid) {
					that.$loadings()
					that.formData.architectName = that.formData.userId?(that.userlist.filter((item) => { return item.userId === that.formData.userId })[0].perName):''
					editCase(that.formData).then(data => {
						that.$loadings().close()
						that.$message({
							type: 'success',
							message: '操作成功!'
						})
						that.research()
						that.closeForm() // 重置表单
					})
						.catch(error => {
							that.$loadings().close()
							that.closeForm() // 重置表单
							console.log(error)
						})
				} else {
					return false
				}
			})
		},

		gteImgList(url) {
			this.srcList = []
			this.srcList.push(url)
		},
		handleDeleted(id) {
			const that = this
			that.$confirm('是否删除该条数据?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				that.$loadings().close()
				deleteCase({
					id: id
				}).then((res) => {
					that.$loadings().close()
					that.$message({
						type: 'success',
						message: '操作成功!'
					})
					that.getListData()
				}).catch(() => {
					that.$loadings().close()
				})
			})
		},
		// 图片上传成功回调
		handleLisenceSuccess(res, file) {
			this.imgLoding.close()
			this.$message({
				type: 'success',
				message: '上传成功!'
			})
			this.uploadImg = this.$urlHost + res.data[0] // 前台展示 绝对路径
			console.log(this.uploadImg)
			this.formData.imgUrl = res.data[0] // 后台接受 相对路径
		},
		// 图片上传前回调
		beforeUpload(file) {
			this.imgLoding = this.$loading({
				lock: true,
				text: '图片上传中···',
				spinner: 'el-icon-loading',
				background: 'rgba(255, 255, 255, 0.4)'
			})
			const isPNG = file.type === 'image/png'
			const isJPG = file.type === 'image/jpeg'
			const isLt2M = file.size / 1024 / 1024 < 10

			if (!isPNG && !isJPG) {
				this.$message.error('上传图片只能是 PNG或JPG 格式!')
				this.imgLoding.close()
			}
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 10MB!')
				this.imgLoding.close()
			}
			return (isPNG || isJPG) && isLt2M
		},
		showImg(url) {
			if (!url) {
				this.$message({
					type: 'error',
					message: '还未上传案例首图!'
				})
			} else {
				this.$alert('<img src="' + this.$urlHost + url +
					'" style="width: 100%"><p style="text-align: center;">右击在新标签页中打开图片查看原图</p>', '案例首图', {
					dangerouslyUseHTMLString: true,
					customClass: 'entercustom'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 80px;
	height: 60px;
	line-height: 60px;
	text-align: center;
}

.avatar {
	width: 150px;
	height: 100px;
}
</style>
